<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <style>
    .red{
        color: red;
        border: 1px solid blue;
    }
    .bg{
        background: yellow;
    }
    .fz{
        font-size: 32px;
    }
    .bg1{
        background: red;
    }
    .bg2{
        background: orange;
    }
    </style>
</head>
<body>
    <div id="box">
        <!-- :class={css样式类名: 变量} -->
        <p :class="{red:red_bool,bg:bg_bool}">一段文本</p>
        <button @click="red_bool=false;">去掉样式</button>
        <button @click="red_bool=true;">添加样式</button>

        <br>
        <br>
        <br>
        <p :class="p_cls">一段文本</p>
        <button @click="p_cls.red=false;p_cls.bg=false;">去掉样式</button>
        <button @click="p_cls.red=true;p_cls.bg=true;">添加样式</button>

        <br>
        <br>
        <br>
        <p :class="[arr1,arr2]">一段文本</p>
        <button @click="arr1.fz=false;">字体变小</button>
        <button @click="arr1.fz=true;">字体变大</button>

        <br>
        <br>
        <br>
        <p :class="status?'bg1':'bg2'">一段文本</p>

    </div>

    <script>
        let vm = new Vue({
            el:"#box",
            data:{
                red_bool:false,
                bg_bool:true,

                p_cls:{
                    red:true,
                    bg:true
                },

                arr1:{
                    red:true,
                    fz:true,
                },
                arr2:{
                    bg:true,
                },
                status:true,
            }
        })
    </script>
</body>
</html>
